<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/flexible.js"></script>
    <script src="../js/echarts.min.js"></script>
    <style>
        .box {
            width: 7.5rem;
            height: 5rem;
        }
    </style>
</head>

<body>
    <div class="box" id='box'></div>
    <script>
        const MyEcharts = echarts.init(document.getElementById('box'))
        let pieData = [{
            name: '第一个',
            value: 100
        }, {
            name: '第二个',
            value: 200
        }, {
            name: '第三个',
            value: 300
        }, {
            name: '第四个',
            value: 400
        }, {
            name: '第五个',
            value: 500
        }]
        const option = {
            series: [{
                data: pieData,
                type: 'pie',
                label: {
                    //饼图文字显示
                    show: true,
                    formatter: function (arg) { //自定义显示
                        return arg.name + arg.value + '\n' + arg.percent + '%'
                    },
                },
                // radius: 20, //饼图的半径
                // radius: ['50%', '70%'], //设置圆环
                roseType: 'radius', //南丁格尔图
                selectedMode: 'single', //点击选中出现的偏离
                selectedOffset: 50 //偏移量



            }]
        };
        MyEcharts.setOption(option)
    </script>

</body>

</html>

</html>